<template>
	<view class="mine">
		<view class="mineTop" :style="{ backgroundImage: 'url(' + imgUrl + 'mineBg.png)' }">
		</view>
		<view class="welcome">
			<view class="">
				欢迎，
			</view>
			<view class="">
				尊敬的{{userInfo.nickName}}顾客，你好
			</view>
		</view>

		<view class="userInfoBox flex_shu">
			<u-avatar :src="userInfo.avatar" shape="circle" size="60" v-if="userInfo.avatar"></u-avatar>
			<u-avatar :src="imgUrl + 'goods.png'" shape="circle" size="60" v-else></u-avatar>
			<view class="nickName">
				{{userInfo.nickName}}
			</view>
		</view>
		<view class="mineCon">
			<view class="mineConTop flex_heng">
				<button class="kefuBtn" open-type="contact">
					<view class="flex_heng" style="justify-content: flex-start;">
						<text>在线客服</text><u-icon name="server-man" color="#000000" :size="20"></u-icon>
					</view>
					<view class="benBtm">
						<text>联系客服</text><text style="color: #FF8F1F;margin-left: 8rpx;">链接直达</text>
					</view>
				</button>
				<view class="addressBox flex_shu" :style="{ backgroundImage: 'url(' + imgUrl + 'mapBg.png)' }">
					<view class="addTop flex_heng">
						<view class="">
							联系门店
						</view>
						<view class="daohang">
							<text>导航</text>
						</view>
					</view>
					<view class="addInfo u-line-1">
						陕西省咸阳市泾阳县西河巴陕西省咸阳市泾阳县西河巴
					</view>
				</view>
			</view>
			<view class="menuBox">
				<view class="menuItem flex_heng" v-for="(item,index) in btnList" :key="index" @click="menuClick(item.link)">
					<view class="menuLeft flex_heng">
						<image :src="imgUrl + item.img" mode="" class="menuImg"></image>
						<view class="menuName">
							{{item.name}}
						</view>
					</view>
					<view class="menuRight">
						<uni-icons type="right" size="16" color="#000"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo,
		getOrderStatusNum,
		getOrderListByUser,
		initiatePay
	} from '@/api/api.js'
	import config from '@/config/config.js'
	export default {
		data() {
			return {
				userShow: false,
				imgUrl: this.$imgUrl,
				carNumber: true,
				userInfo: {
					avatar: '',
					id: '',
					nickName: ''
				},
				btnList: [{
						name: '我的余额',
						img: 'menu1.png',
						link: '/pages/package/myBalance/myBalance'
					},
					{
						name: '我的足迹',
						img: 'menu2.png',
						link: '/pages/package/myFootprints/myFootprints'
					},
					{
						name: '我的收藏',
						img: 'menu3.png',
						link: '/pages/package/myCollection/myCollection'
					},
					{
						name: '我的订单',
						img: 'menu4.png',
						link: '/pages/package/orderManagement/orderManagement'
					},
					{
						name: '个人资料',
						img: 'menu5.png',
						link: '/pages/package/userInfo/userInfo'
					},
					{
						name: '我的服务单',
						img: 'menu6.png',
						link: '/package/pages/browsingHistory/browsingHistory'
					},
					{
						name: '投诉建议',
						img: 'menu7.png',
						link: '/package/pages/browsingHistory/browsingHistory'
					}
				],
				nearestOrder: {},
				timeNum: null,
				orderStatusNum: {},
			}
		},
		onShow() {
			this.findUserInfo()
			// // 获取订单数量
			// this.getOrderStatusNum();
			// this.getOrderListByUser();
		},
		methods: {
			menuClick(url) {
				console.log("item", url)
				uni.navigateTo({
					url
				})
			},
			toMineInfo() {
				uni.navigateTo({
					url: '/package/pages/userInfo/userInfo'
				})
			},

			goLogin() {
				uni.reLaunch({
					url: '/package/pages/login/login'
				})
			},

			splitArray(arr) {
				return arr.split(',')
			},

			// 计算毫秒数
			payExpiredTime(datastr) {
				// 过期时间大于当前 返回 0
				let now = new Date().getTime(); // 当前时间
				let data = new Date(datastr).getTime(); // 过期日期
				if (data <= now) {
					return 0;
				} else {
					return data - now
				}
			},

			//待付款
			getOrderListByUser() {
				let data = {
					pageNum: 1,
					pageSize: 1,
					status: 1, //待付款
					appUserId: uni.getStorageSync('userInfo').id
				}

				getOrderListByUser({
					params: data
				}).then(res => {
					if (res.code == 200) {
						console.log(res);
						if (res.rows.length > 0) {
							this.nearestOrder = res.rows[0];
						}
					}
				})
			},

			// 获取订单数量
			getOrderStatusNum() {
				getOrderStatusNum({}).then(res => {
					if (res.code == 200) {
						this.orderStatusNum = res.data;

						this.orderNavList.map(item => {
							const order = this.orderStatusNum.find(find => find.status == item.status);
							item.msgNum = order.num || 0
							item.left = order.num || 0
						})
					}
				})
			},

			findUserInfo() {

				if (!uni.getStorageSync('userInfo')) {
					uni.reLaunch({
						url: '/pages/package/login/login'
					})
					return
				}

				if (uni.getStorageSync('userInfo').token) {
					getUserInfo().then(res => {
						if (res.code == 200) {
							this.userShow = true;
							this.userInfo = res.data;
						}
					})
				} else {
					this.userShow = false;
					this.userInfo = {
						avatar: '',
						id: '',
						nickName: ''
					}
				}
			},

			getNum() {
				getOrderSum({
					params: {
						userId: uni.getStorageSync('userInfo').id
					}
				}).then(res => {
					if (res.code == 200) {
						// this.userInfo = res.data
						this.orderNavList[0].msgNum = res.data.statusTwo
						this.orderNavList[1].msgNum = res.data.statusFour
						this.orderNavList[2].msgNum = res.data.statusFive
					}
				})
			},


			logout() {
				uni.clearStorageSync()
				uni.reLaunch({
					url: '/package/pages/login/login'
				})
			},
			checkTimeDifference(startTime, durationInMinutes) {
				// 解析开始时间（假设格式是 YYYY-MM-DD HH:MM:SS）
				const startDate = new Date(startTime);

				// 获取当前时间
				const currentDate = new Date();

				// 计算开始时间到当前时间的差值（毫秒）
				const timeDifference = currentDate - startDate;

				// 计算固定时长的毫秒数
				const durationInMillis = durationInMinutes * 60 * 1000;

				if (timeDifference > durationInMillis) {
					this.timeNum = true; // 已经超过固定时长
				} else {
					// 计算剩余时间（分钟）
					const remainingMinutes = Math.ceil((durationInMillis - timeDifference) / (60 * 1000));
					this.timeNum = remainingMinutes; // 返回剩余分钟数
				}
			}
		}
	}
</script>

<style lang="scss">
	.mine {
		width: 100vw;
		height: 100vh;
		opacity: 1;
		background: #f7f7f7;

		.welcome {
			color: #ffffff;
			font-size: 36rpx;
			font-weight: 500;
			font-family: "Alibaba PuHuiTi 2.0";
			position: absolute;
			top: 108rpx;
			left: 36rpx;
		}

		.userInfoBox {
			position: absolute;
			top: 274rpx;
			left: 50%;
			transform: translateX(-50%);
			color: #ffffff;
			font-size: 36rpx;
			font-weight: 500;

			.nickName {
				margin-top: 20rpx;
			}
		}

		.mineCon {
			position: absolute;
			top: 488rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 100%;
			height: calc(100vh - 488rpx);
			padding: 28rpx;
			box-sizing: border-box;

			.mineConTop {
				.kefuBtn {
					width: 252rpx;
					height: 158rpx;
					border-radius: 36rpx;
					opacity: 1;
					background: #ffffff;
					border: none !important;
					color: #000000;
					font-size: 32rpx;
					font-weight: 500;

					.benBtm {
						font-size: 24rpx;
					}
				}

				.kefuBtn::after {
					border: none;
				}

				.addressBox {
					width: 426rpx;
					height: 158rpx;
					background-size: 100% 100%;
					border-radius: 36rpx;
					padding: 28rpx;
					box-sizing: border-box;

					.addTop {
						color: #000000;
						font-size: 32rpx;
						font-weight: 500;
						width: 100%;

						.daohang {
							width: 100rpx;
							height: 46rpx;
							text-align: center;
							border-radius: 12rpx;
							opacity: 1;
							background: #000000;

							text {
								font-style: normal;
								text-transform: none;
								background: linear-gradient(100deg, #00BF39 45%, #34DFA3 75%);
								-webkit-background-clip: text;
								-webkit-text-fill-color: transparent;
								background-clip: text;
								text-fill-color: transparent;
							}
						}
					}

					.addInfo {
						color: #333333;
						font-size: 24rpx;
						font-weight: 500;
					}
				}
			}

			.menuBox {
				margin-top: 28rpx;
				width: 100%;
				height: 700rpx;
				border-radius: 28rpx;
				opacity: 1;
				background: #ffffff;
				padding: 0 28rpx;
				box-sizing: border-box;

				.menuItem {
					width: 100%;
					height: 98rpx;
					border-bottom: 2rpx solid #f7f7f7;

					.menuLeft {
						.menuImg {
							width: 32rpx;
							height: 32rpx;
						}

						.menuName {
							color: #000000;
							font-size: 32rpx;
							font-weight: 400;
							margin-left: 8rpx;
						}
					}
				}
			}
		}


		.mineTop {
			width: 750rpx;
			height: 488rpx;
			background-size: 100% 100%;
			position: absolute;
			top: 0;
			left: 0;

			.bgimage {
				width: 100%;
				height: 100%
			}
		}

	}
</style>